<template>
    <!-- Using ECharts graphic elements for display, so chartDom might not be needed for direct interaction -->
    <div ref="chartDom" class="chart-container"></div>
</template>
  
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted, shallowRef, computed } from 'vue';
  import * as echarts from 'echarts/core';
  import type { EChartsOption } from 'echarts';
  import variables from '../../variables.less?inline';
  
  function getLessVariable(varName: string): string {
      const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
      return match ? match[1].trim() : '#ccc';
  }
  
  const chartDom = ref<HTMLElement | null>(null);
  const myChart = shallowRef<echarts.ECharts | null>(null);
  
  // --- Data (Replace/Calculate as needed) ---
  const totalStaff = ref(384); // Example total
  const malePercent = ref(33);
  const femalePercent = computed(() => 100 - malePercent.value);
  const maleCount = computed(() => Math.round(totalStaff.value * (malePercent.value / 100)));
  const femaleCount = computed(() => totalStaff.value - maleCount.value); // Ensure total adds up
  // --- End Data ---
  
  const axisLineColor = getLessVariable('axis-line-color');
  const textColor = getLessVariable('text-color');
  const maleColor = getLessVariable('male-color');
  const femaleColor = getLessVariable('female-color');
  const panelBg = getLessVariable('bg-color-base');
  
  const option = computed((): EChartsOption => ({
      tooltip: { // Tooltip can still work on the invisible pie slices
          trigger: 'item',
          formatter: '{b}: {c}人 ({d}%)',
          backgroundColor: 'rgba(3, 28, 66, 0.9)',
          borderColor: axisLineColor,
          textStyle: { color: '#fff' }
      },
      graphic: [ // Using graphic elements for the main display
          { // Male Icon/Percent
              type: 'text', left: '25%', top: '30%',
              style: { text: '♂', fill: maleColor, fontSize: 35, fontWeight: 'bold', textAlign: 'center' }
          },
          {
              type: 'text', left: '25%', top: '55%',
              style: { text: malePercent.value + '%', fill: maleColor, fontSize: 20, fontWeight: 'bold', textAlign: 'center' }
          },
          {
              type: 'text', left: '25%', top: '75%',
              style: { text: '男性职员', fill: textColor, fontSize: 12, textAlign: 'center' }
          },
          { // Female Icon/Percent
              type: 'text', right: '25%', top: '30%',
              style: { text: '♀', fill: femaleColor, fontSize: 35, fontWeight: 'bold', textAlign: 'center' }
          },
          {
              type: 'text', right: '25%', top: '55%',
              style: { text: femalePercent.value + '%', fill: femaleColor, fontSize: 20, fontWeight: 'bold', textAlign: 'center' }
          },
          {
              type: 'text', right: '25%', top: '75%',
              style: { text: '女性职员', fill: textColor, fontSize: 12, textAlign: 'center' }
          },
      ],
      series: [ // Include a minimal pie series for tooltip/potential interaction layer
          {
              name: '性别分布', type: 'pie', radius: ['50%', '65%'], center: ['50%', '50%'],
              avoidLabelOverlap: false, label: { show: false }, labelLine: { show: false },
              emphasis: { scaleSize: 5 }, // Subtle hover effect on the ring
              data: [
                  { value: maleCount.value, name: '男性职员' },
                  { value: femaleCount.value, name: '女性职员' }
              ],
              itemStyle: {
                  color: (params: any) => params.name === '男性职员' ? maleColor : femaleColor,
                  borderWidth: 2,
                  borderColor: panelBg // Use variable, should match actual panel background
              },
              // silent: true // Keep it interactive for tooltip
          }
      ]
  }));
  
  const resizeChart = () => myChart.value?.resize();
  
  onMounted(() => {
    if (chartDom.value) {
      myChart.value = echarts.init(chartDom.value);
      myChart.value.setOption(option.value);
      window.addEventListener('resize', resizeChart);
    }
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    myChart.value?.dispose();
  });
  
  </script>
  
  <style lang="less" scoped>
  // .chart-container is defined globally or can be styled here if needed
  .chart-container {
    width: 100%;
    height: 100%; // Make sure it fills the panel content area
    min-height: 150px; // Set minimum height
  }
  </style>